<template>
	<view class="container">
		<!-- 头像和个人信息 -->
		<view class="profile-section">
			<view class="avatar-box">
				<image src="https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M"
					class="avatar"></image>
			</view>
			<view class="info-box">
				<text class="job">王医生7</text>
				<text class="job">主任医生</text>
			</view>
			<view class="skills-box">
				<text class="skills-title">擅长领域</text>
				<text class="skills-content">1.发生的古典风格2.水电费郭德纲3.官方的水电费是的4.东方红过分的话5.斯蒂芬森多福多寿</text>
			</view>
			<view class="detail-link" @tap="navigateToDoctorDetail">了解医生 ></view>
		</view>

		<!-- 公告区域 -->
		<view class="notice-section">
			<text class="notice-title">公告</text>
			<text class="notice-content">系统将于2025年5月25日进行例行维护，维护时间为凌晨2:00-4:00，期间服务将不可用。</text>
		</view>

		<!-- 作品列表 -->
		<view class="works-section">

			<view class="title-container">
				<!-- <text class="section-title">门诊挂号</text>
				<text class="section-title">在线问诊</text> -->
				<u-tabs :list="tablist" lineColor="#0bc5ae" :current="current" :activeStyle="{
				            fontWeight: 'bold',fontSize: '26px'
				        }" :scrollable="false" :inactiveStyle="{fontSize: '26px'}" :itemStyle="{ whiteSpace: 'nowrap' }"
					@click="handleTabClick"></u-tabs>
			</view>

			<view v-if="current == 1" class="column-layout">
				<view class="column" @click="handleImageClick1">
					<image src="https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M"
						class="avatar"></image>
					<view class="title">在线问诊</view>
					<view class="description">¥ 100/次</view>
				</view>
				<view class="column" @click="handleImageClick1">
					<image src="https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M"
						class="avatar"></image>
					<view class="title">上门治疗</view>
					<view class="description">¥ 100/次</view>
				</view>
			</view>


			<!-- 日期选择区域 -->
			<view class="date-selector" v-if="current==0">
				<view class="date-row">
					<view v-for="(day, i) in weekDates" :key="'date'+i" class="date-cell" :class="{ active: day.isSelected }"
						@click="selectDate(i)">
						<text class="date-text">{{ day.monthDay }}</text>
						<text class="week-text">{{ day.weekDay }}</text>
						<text class="week-text">余号11</text>
					</view>
					<!-- 时间插件图标占位 -->
					<view class="calendar-icon" @click="openDatePicker">
						<image class="tubiao" src="../../static/server_select_icon.png" />
					</view>
					<!-- 日期选择器弹窗 -->
					<uni-popup ref="datePopup" type="bottom">
						<view class="date-picker-box">
							<uni-datetime-picker type="date" v-model="selectedDate" @change="dateChange" />
							<button @click="confirmDate">确定</button>
						</view>
					</uni-popup>
				</view>
			</view>


			<view class="data-container" v-if="selectedData.length > 0&&current==0">
				<view v-for="(item, index) in selectedData" :key="'data'+index" class="data-item">
					<text class="data-row1">{{ item.field1 }}</text>
					<view>
						<text class="data-row2">{{ item.field2 }}</text>
						<text class="data-sj" @click="toggleExpand(index)"> {{ expandedIndex === index ? '▲' : '▼' }}</text>
					</view>

					<view class="time-slot" v-if="expandedIndex === index">
						<view class="time-col">
							<text class="time-range">上午 8:30-09:00</text>
							<text class="remaining">剩余3号源</text>
						</view>
						<view class="price-col">
							<text>¥{{ item.price }}</text>
						</view>
						<view class="btn-col">
							<button class="book-btn">分数看诊</button>
						</view>
					</view>
					<view class="time-slot" v-if="expandedIndex === index">
						<view class="time-col">
							<text class="time-range">上午 9:30-10:00</text>
							<text class="status">已约满</text>
						</view>
						<view class="price-col">
							<text>¥{{ item.price }}</text>
						</view>
						<view class="btn-col">
							<button class="book-btn" disabled>已约满</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weekDates: [],
				selectedIndex: -1,
				selectedData: [],
				currentSelectedDay: null,
				expandedIndex: -1,
				tablist: [{
					name: '门诊挂号',
					disabled: false
				}, {
					name: '在线问诊',
					disabled: false
				}],
				current: 0,
			}
		},
		created() {
			//this.initWeekDates();
			this.generateWeekDates()
		},
		methods: {
			handleImageClick1() {
				uni.navigateTo({
					url: '/chronicDisease/pages/index/index' // 目标页面的路径
				});
			},
			toggleExpand(index) {
				this.expandedIndex = this.expandedIndex === index ? -1 : index
			},
			handleTabClick(item) {
				this.current = item.index
			},
			dateChange(e) {
				this.selectedDate = new Date(e)
				this.generateWeekDates()
			},
			generateWeekDates() {
				const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				const baseDate = this.selectedDate instanceof Date ?
					new Date(this.selectedDate) :
					new Date() // 默认当前日期

				// 获取本周一（调整为周一作为起始日）
				const firstDay = new Date(baseDate)
				firstDay.setDate(baseDate.getDate() - (baseDate.getDay() + 6) % 7)

				const dates = []
				for (let i = 0; i < 7; i++) {
					const date = new Date(firstDay)
					date.setDate(firstDay.getDate() + i)
					dates.push({
						monthDay: `${date.getMonth()+1}/${date.getDate()}`,
						weekDay: weeks[date.getDay()],
						isSelected: date.getTime() === baseDate.getTime(),
						fullDate: date
					})
				}
				this.weekDates = dates
				this.currentSelectedDay = baseDate
				this.fetchDataForDate(this.formatDateTime(new Date()));
			},
			selectDate(index) {
				if (!this.weekDates || index >= this.weekDates.length) return
				this.isUnlimited = false
				this.weekDates.forEach((item, i) => {
					item.isSelected = i === index
				})
				console.log(this.weekDates[index].fullDate)
				this.selectedDate = this.weekDates[index].fullDate
				this.fetchDataForDate(this.formatDateTime(this.selectedDate));
			},
			openDatePicker() {
				this.$refs.datePopup.open()
			},
			confirmDate() {
				console.log(this.currentSelectedDay)
				this.fetchDataForDate(this.formatDateTime(this.currentSelectedDay));
				this.$refs.datePopup.close()
			},
			/* initWeekDates() {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const today = new Date();
				const currentDay = today.getDay();

				// 计算本周一的日期
				const monday = new Date(today);
				monday.setDate(today.getDate() - currentDay + (currentDay === 0 ? -6 : 1));

				this.weekDates = [];
				for (let i = 0; i < 7; i++) {
					const date = new Date(monday);
					date.setDate(monday.getDate() + i);
					const isToday = date.toDateString() === today.toDateString();

					this.weekDates.push({
						date: date,
						monthDay: `${date.getMonth()+1}-${date.getDate()}`,
						weekDay: days[date.getDay()],
						isToday: isToday,
						isSelected: isToday
					});
				}

				if (this.weekDates.some(d => d.isToday)) {
					this.fetchDataForDate(this.formatDateTime(today));
				}
			}, */
			/* selectDate(index) {

				this.weekDates.forEach((item, i) => {
					item.isSelected = i === index;
				});
				this.selectedIndex = index;
				this.fetchDataForDate(this.formatDateTime(this.weekDates[index].date));
			}, */
			formatDateTime(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			fetchDataForDate(date) {
				if (date == '2025-05-26') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院1',
							field2: '陕西省西安市莲湖区永安路1',
							price: 50,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院2',
							field2: '陕西省西安市莲湖区永安路2',
							price: 60,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-27') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院3',
							field2: '陕西省西安市莲湖区永安路3',
							price: 70,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院4',
							field2: '陕西省西安市莲湖区永安路4',
							price: 80,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-28') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院5',
							field2: '陕西省西安市莲湖区永安路5',
							price: 90,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院6',
							field2: '陕西省西安市莲湖区永安路6',
							price: 100,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-29') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院7',
							field2: '陕西省西安市莲湖区永安路7',
							price: 110,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院8',
							field2: '陕西省西安市莲湖区永安路8',
							price: 120,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-30') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院9',
							field2: '陕西省西安市莲湖区永安路9',
							price: 130,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院aa',
							field2: '陕西省西安市莲湖区永安路aa',
							price: 140,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-31') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院bb',
							field2: '陕西省西安市莲湖区永安路bb',
							price: 150,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院cc',
							field2: '陕西省西安市莲湖区永安路cc',
							price: 160,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-06-01') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院dd',
							field2: '陕西省西安市莲湖区永安路dd',
							price: 170,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院ee',
							field2: '陕西省西安市莲湖区永安路ee',
							price: 180,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				} else if (date == '2025-05-26') {
					// 模拟API调用获取数据
					this.selectedData = [{
							field1: '西安大兴医院ff',
							field2: '陕西省西安市莲湖区永安路ff',
							price: 190,
							field4: '剩余号源: 15'
						},
						{
							field1: '西安大兴医院hh',
							field2: '陕西省西安市莲湖区永安路hh',
							price: 200,
							field3: '时间: 14:00-16:30',
							field4: '剩余号源: 8'
						}
					];
				}

			}
		}


	}
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f7f7f7;
	}

	.tubiao {
		width: 24px;
		height: 34px;
	}

	.profile-section {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.avatar-box {
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 60px;
		border: 3px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}


	.job {
		font-size: 16px;
		color: #666;
		display: block;
		margin-top: 5px;
	}

	.skills-box {
		margin-top: 15px;
	}

	.skills-title {
		color: #f5a623;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		margin-right: 30rpx;

	}

	.skills-content {
		font-size: 16px;
	}

	.skill-item {
		padding: 8px 0;
		border-bottom: 1px dashed #eee;
	}

	.notice-section,
	.works-section {
		background: #fff;
		padding: 15px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		display: block;
		color: #333;
	}

	.notice-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
		margin-right: 30rpx;
	}



	.notice-item {
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.work-item {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.title-container {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
	}

	/* 	.section-title {
		font-size: 18px;
		font-weight: bold;
		
	} */


	.date-selector {
		margin-top: 10px;
	}

	.date-row {
		display: flex;
		justify-content: space-between;
	}

	.date-cell {
		flex: 1;
		text-align: center;
		padding: 8px 0;
		border-radius: 4px;
	}

	.date-text {
		display: block;
		font-weight: bold;
		font-size: 14px;
	}

	.week-text {
		display: block;
		font-size: 12px;
		color: #666;
	}

	.active {
		background: #1890ff;
	}

	.active .date-text,
	.active .week-text {
		color: #fff;
	}

	.data-container {
		background-color: #f5f5f5;
		padding: 10px;
	}

	.data-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
	}

	.data-row1 {
		font-size: 18px;
		color: #333;
	}

	.data-row2 {
		font-size: 14px;
		color: #333;
	}

	.time-slot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 10px;
	}

	.time-col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.time-range {
		font-size: 14px;
		color: #333;
	}

	.remaining,
	.status {
		font-size: 12px;
		color: #999;
	}

	.price-col {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 30px;
		color: red;
	}

	.btn-col {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: auto;
		/* 为了使按钮靠右对齐 */
	}

	.book-btn {
		background-color: #f5a623;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
		cursor: pointer;
		font-size: 12px;
	}

	.book-btn.disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.detail-link {
		margin-left: 78%;
		color: #ffaa00;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
	}

	.detail-link:active {
		opacity: 0.7;
	}

	.calendar-icon {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date-picker-box {
		background: #fff;
		padding: 20px;
		border-radius: 10px 10px 0 0;
	}

	.column-layout {
		display: flex;
		gap: 16px;
		/* 列之间的间距 */
	}

	.column {
		flex: 1;
		border: 1px solid #000000;
		/* 每列占据相等的空间 */
	}

	.avatar {
		margin-top: 10px;
		width: 100px;
		/* 根据需要调整大小 */
		height: 100px;
		border-radius: 50%;
		margin-left: 30px;
		/* 圆形头像 */
	}

	.title {
		margin-top: 16px;
		margin-left: 50px;
		/* 头像与标题之间的间距 */
		font-size: 14px;
	}

	.description {
		margin-top: 8px;
		margin-left: 50px;
		/* 标题与介绍之间的间距 */
		font-size: 14px;
	}
</style>